<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>竹里馆后台</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
    <link rel="stylesheet" href="./css/font.css">
	<link rel="stylesheet" href="./css/xadmin.css">
    <link rel="stylesheet" href="https://cdn.bootcss.com/Swiper/3.4.2/css/swiper.min.css">
    <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <script type="text/javascript" src="https://cdn.bootcss.com/Swiper/3.4.2/js/swiper.jquery.min.js"></script>
    <script src="./lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="./js/xadmin.js"></script>

</head>
<body>
    <!-- 顶部开始 -->
    <div class="container">
        <div class="logo"><a href="./index.jsp">竹里馆</a></div>
        <div class="open-nav"><i class="iconfont">&#xe699;</i></div>
        <ul class="layui-nav right" lay-filter="">
          <li class="layui-nav-item">
            <a href="#">${sessionScope.adminMap.adminId}</a>
            <dl class="layui-nav-child"> <!-- 二级菜单 -->
              <dd><a href="${pageContext.request.contextPath}/AdminServlet?op=logout">退出</a></dd>
            </dl>
          </li>
          <li class="layui-nav-item"><a href="${pageContext.request.contextPath}/back/index.jsp">首页</a></li>
        </ul>
    </div>
    <!-- 顶部结束 -->
    <!-- 中部开始 -->
    <div class="wrapper">
        <!-- 左侧菜单开始 -->
        <div class="left-nav">
          <div id="side-nav">
            <ul id="nav">
                <li class="list" current>
                    <a href="./index.jsp">
                        <i class="iconfont">&#xe761;</i>
                                                                        首页
                        <i class="iconfont nav_right">&#xe697;</i>
                    </a>
                </li>              
                <li class="list" >
                    <a href="javascript:;">
                        <i class="iconfont">&#xe6a3;</i>
                                                                        房源信息
                        <i class="iconfont nav_right">&#xe697;</i>
                    </a>
                    <ul class="sub-menu">
                        <li>
                            <a href="${pageContext.request.contextPath}/back/HomestayMessageAdmin.jsp">
                                <i class="iconfont">&#xe6a7;</i>
                                                                                                 民宿管理
                            </a>
                        </li>
                    </ul>
                </li>
                <li class="list" >
                    <a href="javascript:;">
                        <i class="iconfont">&#xe6a3;</i>
                                                                        订单详情
                        <i class="iconfont nav_right">&#xe697;</i>
                    </a>
                    <ul class="sub-menu" style="display:none">
                        <li>
                            <a href="./orderInfo.jsp">
                                <i class="iconfont">&#xe6a7;</i>
                                                                                                 订单列表
                            </a>
                        </li>
                    </ul>
                </li>
                
                <li class="list" >
                    <a href="javascript:;">
                        <i class="iconfont">&#xe6a3;</i>
                       	 销量统计
                        <i class="iconfont nav_right">&#xe697;</i>
                    </a>
                    <ul class="sub-menu" style="display:none">
                        <li id="regionChart">
                            <a href="${pageContext.request.contextPath}/back/echarts.jsp">
                                <i class="iconfont">&#xe6a7;</i>
                              	 各地区总收入报表
                            </a>
                        </li>
                        <li id="styleChart">
                            <a href="${pageContext.request.contextPath}/back/echarts2.jsp">
                                <i class="iconfont">&#xe6a7;</i>
                                                                                               按风格查询报表                                                               
                            </a>
                        </li>
                        <%-- <li id="sunChart">
                            <a href="${pageContext.request.contextPath}/back/echarts3.jsp">
                                <i class="iconfont">&#xe6a7;</i>
                               	旭日图
                            </a>
                        </li> --%>
                    </ul>
                </li>
               
            </ul>
          </div>
        </div>
        <!-- 左侧菜单结束 -->
        <!-- 右侧主体开始 -->
        <!-- class="page-content" -->
        <div class="page-content">
        <div id="backAdminHome" style="text-align:center;font-size:30px">
               <!-- 独坐幽篁里，弹琴复长啸，深林人不知，明月来相照 -->
          </div>
          <div >
           	<ul>
           		<li ><div id="firstChart" style="max-width: 100%;height:600px;"></div></li>
           	</ul>
           
          </div>
        </div>
        <!-- 右侧主体结束 -->
    </div>
    <!-- 中部结束 -->
    <!-- 底部开始 -->
    <!-- 底部结束 -->
    <!-- 背景切换开始 -->
	<div class="bg-changer">
        <div class="swiper-container changer-list">
            <div class="swiper-wrapper">
                <div class="swiper-slide"><img class="item" src="./images/a.jpg" alt=""></div>
                <div class="swiper-slide"><img class="item" src="./images/b.jpg" alt=""></div>
                <div class="swiper-slide"><img class="item" src="./images/c.jpg" alt=""></div>
                <div class="swiper-slide"><img class="item" src="./images/d.jpg" alt=""></div>
                <div class="swiper-slide"><img class="item" src="./images/e.jpg" alt=""></div>
                <div class="swiper-slide"><img class="item" src="./images/f.jpg" alt=""></div>
                <div class="swiper-slide"><img class="item" src="./images/g.jpg" alt=""></div>
                <div class="swiper-slide"><img class="item" src="./images/h.jpg" alt=""></div>
                <div class="swiper-slide"><img class="item" src="./images/i.jpg" alt=""></div>
                <div class="swiper-slide"><img class="item" src="./images/j.jpg" alt=""></div>
                <div class="swiper-slide"><img class="item" src="./images/k.jpg" alt=""></div>
                <div class="swiper-slide"><span class="reset">初始化</span></div>
            </div>
        </div>
        <div class="bg-out"></div>
        <div id="changer-set"><i class="iconfont">&#xe696;</i></div>   
    </div>
    <!-- 背景切换结束 -->
        
    <script src="./js/echarts.min.js" charset="utf-8"></script>
    <script type="text/javascript" src="./js/echarts-for-x-admin.js"></script>

    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myFirstChart = echarts.init(document.getElementById('firstChart'),'echarts-for-x-admin');
        /* var mySecondChart = echarts.init(document.getElementById('secondChart'),'echarts-for-x-admin');
        var myThirdChart = echarts.init(document.getElementById('thirdChart'),'echarts-for-x-admin'); */
        var colors = ['#FFAE57', '#FF7853', '#EA5151', '#CC3F57', '#9A2555'];
        var bgColor = '#2E2733';

        var itemStyle = {
            star5: {
                color: colors[0]
            },
            star4: {
                color: colors[1]
            },
            star3: {
                color: colors[2]
            },
            star2: {
                color: colors[3]
            }
        };

        var data = [{
            name: '前端',
            itemStyle: {
                color: colors[1]
            },
            children: [{
                name: '乔志宇',
                children: [{
                    name: '4☆',
                    children: [{
                        name: '密码加密'
                    }, {
                        name: '手机短信验证码'
                    }, {
                        name: '随机验证码'
                    },{
                    	name: '登录注册'
                    }]
                }]
                }, {
                name: '袁大力',
                children: [{
                    name: '5☆',
                    children: [{
                        name: 'home界面的信息渲染'
                    },{
                    	name: 'rome界面的信息渲染'
                    },{
                    	name: 'home的多条件查询'
                    },{
                    	name: '省市联动'
                    },{
                    	name: 'rome的多条件查询'
                    }]
                }]
                }, {
                name: '赵洋',
                children: [{
                    name: '4☆',
                    children: [{
                        name: '订单查询'
                    }, {
                        name: '收藏查询'
                    }, {
                        name: '修改密码'
                    },{
                    	name: '退出登录'
                    },{
                    	name: '天气预报'
                    }]
                }]
                }, {
                name: '冯照荣',
                children: [{
                    name: '2☆',
                    children: [{
                        name: '订单信息界面'
                    }, {
                        name: '根据查询对象设置房间状态'
                    },{
                    	name: '根据查询对象设置房间信息'
                    },{
                    	name: '对房间进行渲染、填充 '
                    },{
                    	name: '与支付界面进行信息交互'
                    }]
                }]
                }, {
                name: '潘佳琦',
                children: [{
                    name: '4☆',
                    children: [{
                        name: '支付宝沙箱'
                    }, {
                        name: '地图定位'
                    }]
                }]
                }, {
                name: '刘美琦',
                children: [{
                    name: '3☆',
                    children: [{
                        name: '查看当前用户是否收藏民宿'
                    }, {
                        name: '在房间详情浏览评论和其子评论'
                    }, {
                        name: '针对订单进行评论'
                    },{
                        name: '针对评论进行回复'
                    },{
                    	name: '收藏民宿'
                    },{
                    	name: '取消收藏民宿'
                    }]
               	}]
            }]
        }, {
            name: '后端',
            itemStyle: {
                color: colors[2]
            },
            children: [{
                name: '乔志宇',
                children: [{
                    name: '5☆',
                    children: [{
                        name: '折线图'
                    },{
                    	name: '柱状图'
                    },{
                    	name: '饼图'
                    },{
                    	name: '旭日图'
                    }]
                }]
            	}, {
                name: '袁大力',
                children: [{
                    name: '3☆',
                    children: [{
                        name: '民宿的增删改查'
                    },{
                    	name: '民宿下房间的增删改查'
                    }]
                }]
            	}, {
            	name: '赵洋',
                children: [{
                    name: '4☆',
                    children: [{
                        name: '订单查询'
                    }, {
                        name: '列表分页'
                    }]
                }]
                }, {
                name: '冯照荣',
                children: [{
                    name: '2☆',
                    children: [{
                        name: '管理员登录'
                    },{
                    	name: '管理员登录与信息交互'
                    },{
                    	name: '管理员个人中心'
                    }]
                }]
                }, {
                name: '潘佳琦',
                children: [{
                    name: '5☆',
                    children: [{
                        name: '实现分页功能'
                    }]
                }]
                }, {
                name: '刘美琦',
                children: [{
                    name: '3☆',
                    children: [{
                        name: '敏感词过滤器'
                    }]
                }]
            }]
        }];

        for (var j = 0; j < data.length; ++j) {
            var level1 = data[j].children;
            for (var i = 0; i < level1.length; ++i) {
                var block = level1[i].children;
                var bookScore = [];
                var bookScoreId;
                for (var star = 0; star < block.length; ++star) {
                    var style = (function (name) {
                        switch (name) {
                            case '5☆':
                                bookScoreId = 0;
                                return itemStyle.star5;
                            case '4☆':
                                bookScoreId = 1;
                                return itemStyle.star4;
                            case '3☆':
                                bookScoreId = 2;
                                return itemStyle.star3;
                            case '2☆':
                                bookScoreId = 3;
                                return itemStyle.star2;
                        }
                    })(block[star].name);

                    block[star].label = {
                        color: style.color,
                        downplay: {
                            opacity: 0.5
                        }
                    };

                    if (block[star].children) {
                        style = {
                            opacity: 1,
                            color: style.color
                        };
                        block[star].children.forEach(function (book) {
                            book.value = 1;
                            book.itemStyle = style;

                            book.label = {
                                color: style.color
                            };

                            var value = 1;
                            if (bookScoreId === 0 || bookScoreId === 3) {
                                value = 5;
                            }

                            if (bookScore[bookScoreId]) {
                                bookScore[bookScoreId].value += value;
                            }
                            else {
                                bookScore[bookScoreId] = {
                                    color: colors[bookScoreId],
                                    value: value
                                };
                            }
                        });
                    }
                }

                level1[i].itemStyle = {
                    color: data[j].itemStyle.color
                };
            }
        }

        var firstOption = {
        		title: {
                    text: '独坐幽篁里，弹琴复长啸，深林人不知，明月来相照'
                },
            backgroundColor: bgColor,
            color: colors,
            series: [{
                type: 'sunburst',
                center: ['50%', '48%'],
                data: data,
                sort: function (a, b) {
                    if (a.depth === 1) {
                        return b.getValue() - a.getValue();
                    }
                    else {
                        return a.dataIndex - b.dataIndex;
                    }
                },
                label: {
                    rotate: 'radial',
                    color: bgColor
                },
                itemStyle: {
                    borderColor: bgColor,
                    borderWidth: 2
                },
                levels: [{}, {
                    r0: 0,
                    r: 40,
                    label: {
                        rotate: 0
                    }
                }, {
                    r0: 40,
                    r: 105
                }, {
                    r0: 115,
                    r: 140,
                    itemStyle: {
                        shadowBlur: 2,
                        shadowColor: colors[2],
                        color: 'transparent'
                    },
                    label: {
                        rotate: 'tangential',
                        fontSize: 10,
                        color: colors[0]
                    }
                }, {
                    r0: 140,
                    r: 145,
                    itemStyle: {
                        shadowBlur: 80,
                        shadowColor: colors[0]
                    },
                    label: {
                        position: 'outside',
                        textShadowBlur: 5,
                        textShadowColor: '#333',
                    },
                    downplay: {
                        label: {
                            opacity: 0.5
                        }
                    }
                }]
            }]
        };
        
     	// 使用刚指定的配置项和数据显示图表。
        myFirstChart.setOption(firstOption);

    </script>
    <script>
    //百度统计可去掉
    var _hmt = _hmt || [];
    (function() {
      var hm = document.createElement("script");
      hm.src = "https://hm.baidu.com/hm.js?b393d153aeb26b46e9431fabaf0f6190";
      var s = document.getElementsByTagName("script")[0]; 
      s.parentNode.insertBefore(hm, s);
    })();
    </script>
</body>
</html>